<template>
<div class="main">
    <!-- 返回按钮 -->
    <div class="div1">
        <el-button type="info" @click="fanHui()">返回</el-button>
    </div>
    <!-- 新增的表单 -->
    <div class="div2">
        <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition" class="clear">
            <el-form-item label="类型">
                <el-select v-model="form.types" placeholder="请选择">
                    <el-option v-for="item in typeSea" :key="item.id" :label="item.title" :value="item.title"></el-option>
                <!-- <el-option label="电话" value="0"></el-option>
                <el-option label="信息" value="1"></el-option>
                <el-option label="邮件" value="2"></el-option>
                <el-option label="拜访" value="3"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="form.status" placeholder="请选择">
                    <el-option v-for="item in status" :key="item.id" :label="item.title" :value="item.title"></el-option>
                <!-- <el-option label="新跟进" value="1"></el-option>
                <el-option label="进行中" value="2"></el-option>
                <el-option label="已完成" value="3"></el-option>
                <el-option label="已取消" value="4"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="患者">
                <el-input v-model="form.customerId">
                    <el-button icon="el-icon-search" slot="append" @click="dialogTableVisible = true">查找</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="跟进日期">
                <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.followDay" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="下次跟进">
                <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.nextFollowDay" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item class="fuWenBen">
                <template>
                    <div style="border: 1px solid #ccc;">
                        <Toolbar
                            style="border-bottom: 1px solid #ccc"
                            :editor="editor"
                            :defaultConfig="toolbarConfig"
                            :mode="mode"
                        />
                        <Editor
                            style="height: 500px; overflow-y: hidden;"
                            v-model="html"
                            :defaultConfig="editorConfig"
                            :mode="mode"
                            @onCreated="onCreated"
                        />
                    </div>
                </template>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="patientsFollowAdd()">确定</el-button>
                <el-button @click="cancel()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 点击患者输入框中查找按钮的弹框 -->
    <div>
        <el-dialog title="查找患者" :visible.sync="dialogTableVisible">
            <div class="search">
                <el-input v-model="input2" placeholder="请输入...">
                    <el-button icon="el-icon-search" slot="append"></el-button>
                </el-input>
            </div>
            
            <el-table :data="gridData">
                <el-table-column property="type" label="类型" width="50"></el-table-column>
                <el-table-column property="name" label="患者名称" width="100"></el-table-column>
                <el-table-column property="sex" label="性别" width="50"></el-table-column>
                <el-table-column property="age" label="年龄" width="50"></el-table-column>
                <el-table-column property="phone" label="手机号码" width="150"></el-table-column>
                <el-table-column property="shenFenZheng" label="身份证号" width="200"></el-table-column>
                <el-table-column property="fuZeRen" label="负责人" width="80"></el-table-column>
                <el-table-column property="state" label="状态" width="80"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="">
                        <el-button type="success" icon="el-icon-plus">选择该患者</el-button>
                    </template>   
                </el-table-column>
            </el-table>

            <!-- 页码内容 -->
            <div class="pages clear">
                <div class="leftPage">
                    <span>共 <b>3</b> 条 | 每页 <b>20</b> 条 | 共 <b>6</b> 页</span>
                </div>
                <div class="rightPage">
                    <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="60">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
    
</div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {initPatientsTableFollowAdd,PatientsTableFollowAdd} from '../utils/api/patientsFallow'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components: { Editor, Toolbar },
data(){
    return {
        input2:"",
        typeSea:[],
        status:[],
        labelPosition:'left',
        form:{
            types:'电话',
            status:'新跟进',
            title:null,
            customerId:null,
            followDay:null,
            nextFollowDay:null
        },
        editor: null,
        html: '<p>hello</p>',
        toolbarConfig: { },
        editorConfig: { placeholder: '请输入内容...' },
        mode: 'default', // or 'simple'
        dialogTableVisible:false,
        gridData:[
            {
                type:'私海',
                name:'田娜娜',
                sex:'女',
                age:20,
                phone:'15230214568',
                shenFenZheng:'215203145652452134',
                fuZeRen:'李四',
                state:'有效'
            },
            {
                type:'公海',
                name:'田娜娜',
                sex:'女',
                age:20,
                phone:'15230214568',
                shenFenZheng:'215203145652452134',
                fuZeRen:'李四',
                state:'无效'
            },
             {
                type:'私海',
                name:'田娜娜',
                sex:'女',
                age:20,
                phone:'15230214568',
                shenFenZheng:'215203145652452134',
                fuZeRen:'李四',
                state:'有效'
            }
        ]
    }
},
methods:{
    // 点击新增页面中的返回按钮，返回到患者跟进的主页面
    fanHui(){
        this.$router.push('/home/patientsFollow/patientsFollowHome')
    },
     // 点击新增页面中的确认按钮，添加数数到后台数据库，并且返回到患者跟进的主页面
    patientsFollowAdd(){
        // console.log(this.form);
        PatientsTableFollowAdd(this.form).then((data)=>{
            console.log(data);
            if(data.data.code==200){
                this.$router.push('/home/patientsFollow/patientsFollowHome')
            }
        })
    },
    // 点击新增页面中的取消按钮，返回到患者跟进的主页面
    cancel(){
        this.$router.push('/home/patientsFollow/patientsFollowHome')
    },
    // 富文本编辑器
    onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
},
created(){
    initPatientsTableFollowAdd().then((data)=>{
        console.log(data);
        this.typeSea=data.data.data.type;
        this.status=data.data.data.status;
        console.log(this.typeSea,this.status);
    })
}
}
</script>
<style lang="less" scoped>
.main{
    width: 100%;
    background-color: white;
    margin-top: 20px;
    
}
.div2{
    width: 100%;
    margin-top: 20px;
    // border: 1px solid blue;
}
.el-form-item{
    width:50%;
    float: left;
    padding-right: 30px;
    box-sizing: border-box;
}
.fuWenBen{
    width:100% ;
    // border: 1px solid red;
}
.el-select{
    width: 100%;
}
.el-col{
    width: 100%;
}
.search{
    width: 30%;
    float: right;
}
 .pages{
        background-color: #FAFAFA;
        padding: 20px;
        .leftPage{
            float: left;
        }
        .rightPage{
            float: right;
        }
    }
</style>